body {
    padding: 0;
    margin: 0;
}

.not-show {
    display: none;
}
.show {
    display: block;
}

/* 加载动画loading */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(220px);
}
.spinner {
    margin: 100px auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}

.spinner>div {
    background-color: #333;
    height: 100%;
    width: 6px;
    display: inline-block;

    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {

    0%,
    40%,
    100% {
        -webkit-transform: scaleY(0.4)
    }

    20% {
        -webkit-transform: scaleY(1.0)
    }
}

@keyframes sk-stretchdelay {

    0%,
    40%,
    100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }

    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}


/* *****************************主体部分************************ */
.container-main .top-tit {
    height: 64px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    z-index: 999;
    background: #fff;
    width: 100%;
    border-bottom: 1px solid #ddd;

    position: fixed;
    top: 0;
    left: 0;
}

.container-main .top-tit .icon-logo {
    margin-right: 17px;
    margin-top: 5px;
}
.container-main .top-tit .icon-logo img{
    border-radius: 50%;
    padding: 10px;
}
.container-main .top-tit .icon-logo img:hover{
    background: #eee;
}


/* *****************************照片内容************************ */
.container-main .photo-list-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-main .photo-list-box .main-box {
    width: 80vw;

    margin-top: 94px;

    display: flex;
    flex-wrap: wrap;
}

.container-main .photo-list-box .main-box .item-pic {
    display: flex;
    flex-direction: column;

    margin: 0 20px 20px 0;
}

/* 加号 */
.container-main .photo-list-box .main-box .item-pic .up-img-add {
    width: 170px;
    height: 170px;
    border-radius: 8px;
    border: 1px solid #dadce0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.container-main .photo-list-box .main-box .item-pic .up-img-add .pic-img-add {
    width: 20px;
    height: 20px;
    border-radius: 8px;
}

/* 非加号 */
.container-main .photo-list-box .main-box .item-pic .up-img {
    width: 170px;
    height: 170px;
    overflow: hidden;
    border-radius: 8px;

    box-shadow: 0 0 10px #eee;
}

.container-main .photo-list-box .main-box .item-pic .up-img .pic-img {
    width: 100%;
    height: 100%;
    border-radius: 8px;

    object-fit: cover;
    object-position: center;

    transition: all 1s;
}

/* 鼠标移入图片变大动画 */
.container-main .photo-list-box .main-box .item-pic .up-img .pic-img:hover {
    transform: scale(1.15);
    transition: all 1s;
}

.container-main .photo-list-box .main-box .item-pic .down-words {
    padding-top: 8px;
}

.container-main .photo-list-box .main-box .item-pic .down-words .tit {
    font-size: .875rem;
    color: #202124;
    font-weight: 500;
}

.container-main .photo-list-box .main-box .item-pic .down-words .cont {
    font-size: .75rem;
    color: #5f6368;
    font-weight: 400;
    padding-top: 2px;
}